Flex Item 속성 정리

Flexbox 레이아웃에서 개별 flex item에 적용할 수 있는 속성들이 어떤 상황에서 어떻게 작동하는지 아래와 같이 정리했습니다.

---

1️⃣ order - 시각적 순서 제어

order는 flex item의 시각적인 순서를 지정합니다. HTML 순서와 관계없이 배치 순서를 바꿀 수 있습니다.

• 기본값: 0

🧐 사용 예시

.order-1 { order: 1; background: #4db6ac; }
.order-2 { order: 2; background: #9575cd; }

✔️ 이 경우 Item 2가 화면상에서 먼저 나타납니다.

• 활용 팁: 반응형 디자인에서 화면 크기에 따라 순서를 유동적으로 바꿔야 할 때 유용

2️⃣ align-self - 개별 아이템 정렬

align-self는 특정 flex item 하나만 다르게 정렬하고 싶을 때 사용합니다.

• auto (기본값): 부모의 align-items 값을 따름
• flex-start, flex-end, center, baseline, stretch

🧐 사용 예시

.align-default { background: #ff8a65; align-self: auto; }
.align-center { background: #7986cb; align-self: center; }

✔️ 두 번째 아이템만 수직 가운데 정렬

---

3️⃣ 'flex-grow` - 여분 공간 분배 (팽창 비율)

flex-grow는 flex container 내 남는 공간을 item들이 어떻게 나눌지를 결정합니다.

• 기본값: 0 (여유 공간 없음)

🧐 사용 예시

.grow-1 { flex-grow: 1; background: #f06292; }
.grow-2 { flex-grow: 2; background: #4fc3f7; }

✔️ flex-grow는 여분의 공간이 있을 때 해당 아이템이 얼마나 확장될 수 있는지를 나타냅니다. 비율 값으로 설정되며, 값이 클수록 많이 팽창됩니다.

---

4️⃣ flex-shrink - 항목 축소 비율

컨테이너보다 아이템이 커질 경우, 얼마나 줄어들 수 있는지 설정합니다.

• 기본값: 1 (자동 축소 허용)

.shrink-0 { flex-shrink: 0; width: 300px; background: #fbc02d; }
.shrink-1 { flex-shrink: 1; width: 300px; background: #8d6e63; }

✔️ 이 속성이 있으면 해당 아이템은 줄어들지 않고, 오버플로우 될 수 있음

---

5️⃣ flex-basis vs width / height - 기본 크기 비교

flex-basis는 flex item의 기준 크기를 정합니다. width나 height보다 우선 적용됩니다.

• 기본값: auto (내용 크기 or width 기준)

.basis { flex-basis: 200px; width: 100px; background: #81c784; }
.no-basis { width: 100px; background: #e57373; }

✔️ 이 경우, flex-basis가 우선 적용되어 200px(item1)로 시작